<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <!--{include file='comm/header.tpl'}-->
    <title>商品分类</title>
    <!--{include file="comm/icheck.tpl"}-->
</head>

<body>
<style>
    .fbutton .add {
		background: url("/framework/flexigrid/css/images/add.png") no-repeat scroll left center rgba(0, 0, 0, 0);
    }
     div.tDiv {
    	width:80px;
    	margin-bottom:2px;
        background: url("/framework/flexigrid/css/images/bg.gif") repeat-x scroll center top #EAEAEA;
        border-color: #CCCCCC #CCCCCC -moz-use-text-color;
        padding:5px;
    }
     
    #img_add_1,.add,a{cursor: pointer;}
    
    .tal{text-align: center;}
    
    #goods_table th{color:#666666;font-weight:bold;}
    
    #goods_table td{padding:8px;}
    
    .left{float:left;}
    
    .closeImg{
	    background:url('/quanliadmin/docroot/images/backend/category_icon.png') no-repeat -20px 0px;
		width:14px;height:14px;
		margin:8px 6px 0px 10px;
		cursor:pointer;
    }
    
    .openImg{
    	background:url('/quanliadmin/docroot/images/backend/category_icon.png') no-repeat 0px 0px;
    	width:14px;
    	height:14px;
    	margin:8px 6px 0px 10px;
    	cursor:pointer;
    }
    
    .childImg{
    	background:url("/quanliadmin/docroot/images/backend/category_icon.png") no-repeat 0px -18px;
    	width:14px;
    	height:14px;
    	margin:0px 6px 0px 10px;
    }
    
    .point{
    	background:url('/quanliadmin/docroot/images/point.png') no-repeat 0px 0px;
    	width:8px;
    	height:14px;
    	margin:8px 6px 0px 16px;
    }
    
    .childCategory{
    	width:16px;
    	height:16px;
    	background-image:url(/quanliadmin/docroot/images/backend/ImageBundle.gif);
    	background-repeat:no-repeat;
    	background-position:0 -14px;
    	margin-left:34px;
    	cursor:pointer;
    }
    
    .editCategory{
    	width:16px;
    	height:16px;
    	background-image:url(/quanliadmin/docroot/images/backend/ImageBundle.gif);
    	background-repeat:no-repeat;
    	background-position:0 -181px;
    	margin-left:34px;
    	cursor:pointer;
   	}
    
    .delCategory{
    	width:16px;
    	height:16px;
    	background-image:url(/quanliadmin/docroot/images/backend/ImageBundle.gif);
    	background-repeat:no-repeat;
    	background-position:0 -133px;
    	margin-left:34px;
    	cursor:pointer;
   	}
    
	.permission_box div.fl {
		margin-right: 10px;
		margin-bottom: 10px;
		width: 110px;
	}
</style>

<div class="ebsig_container">
    <div class="comm_content">

        <div class="items2" id = "cate_table" style="margin-left:12px;width:1024px;border-top:0px;">
        	<!--{if $edit_permission}-->
                <button type="button" class="btn btn-default" onclick = 'category.add()'>添加分类</button>   
            <!--{/if}-->
            <table class="table table-bordered table-hover" class="s" style="width: 100%;margin: 0 auto 8px;">
                <thead>
                <tr>
                    <th width="60%" style="text-align:left;padding-left:36px;">分类名称</th>
                    <th width="10%" style="text-align:center;">使用状态</th>
                    <!--{if $edit_permission}-->
                    	<th width="10%" style="text-align:center;">添加子类</th>
                    	<th width="10%" style="text-align:center;">修改</th>
                    	<th width="10%" style="text-align:center;">删除</th>
                    <!--{/if}-->
                </tr>
                </thead>

                <tbody>
                    <!--{foreach from=$category item=big}-->
                    	
                    	<tr pid="0" cid="<!--{$big.bigCategoryID}-->" cname="big">
                    		<td>
                    			<div <!--{if $big.midCategory != ''}--> class="left closeImg" onclick="category.showCategory(<!--{$big.bigCategoryID}-->,1);" id="icon_<!--{$big.bigCategoryID}-->" <!--{else}--> class="left point" <!--{/if}-->  ></div>
                    			<div class="left">
                    				<form class="form-inline" role="form">
	                    				<!--{if $edit_permission}-->
	                    					<div class="form-group">
		                    					<input type="text" name="input_<!--{$big.bigCategoryID}-->" id="input_<!--{$big.bigCategoryID}-->" maxlength="20" value="<!--{$big.name}-->" onfocus="category.nameFocus(<!--{$big.bigCategoryID}-->);" onblur="category.nameBlur(<!--{$big.bigCategoryID}-->, 1);" class="form-control input-sm ">
		                    				</div>
		                    				<div class="form-group" style="margin-left:22px;">
		                    					排序 <input type="text" value="<!--{$big.sortOrder}-->" id="sort_<!--{$big.bigCategoryID}-->" name="sort_<!--{$big.bigCategoryID}-->" maxlength="10" onfocus="category.sortFocus(<!--{$big.bigCategoryID}-->);" onblur="category.sortBlur(<!--{$big.bigCategoryID}-->, 1);" class="form-control input-sm" style="width:60px;">
		                    				</div>
	                    				<!--{else}-->
	                    					<div class="form-group">
	                    						<input type="text" value="<!--{$big.name}-->" readonly class="form-control input-sm ">
	                    					</div>
	                    					<div class="form-group" style="margin-left:22px;">
	                    						排序<input type="text" value="<!--{$big.sortOrder}-->" readonly class="form-control input-sm " style="width:60px;">
	                    					</div>
	                    				<!--{/if}-->
                    				</form>
                    			</div>
                    		</td>
                    		<td style="text-align:center;" class="use_<!--{$big.bigCategoryID}-->">
                    			<!--{if $edit_permission}-->
	                    			<!--{if $big.useFlg == 1}-->
	                    				<a href="javascript:void(0);" onclick="category.changeUse(<!--{$big.bigCategoryID}-->, 0, 1);">启用</a>
	                    			<!--{else}-->
	                    				<a href="javascript:void(0);" onclick="category.changeUse(<!--{$big.bigCategoryID}-->, 1, 1);">禁用</a>
	                    			<!--{/if}-->
	                    		<!--{else}-->
	                    			<!--{if $big.useFlg == 1}-->
	                    				启用
	                    			<!--{else}-->
	                    				禁用
	                    			<!--{/if}-->
                    			<!--{/if}-->
                    		</td>
                    		<!--{if $edit_permission}-->
	                    		<td><div class="childCategory" onclick=category.addChild('<!--{$big.bigCategoryID}-->_0_2');></div></td>
	                    		<td><div class="editCategory" onclick="category.edit(<!--{$big.bigCategoryID}-->, 1);"></div></td>
	                    		<td><div class="delCategory" onclick="category.delCategory(<!--{$big.bigCategoryID}-->, 1);"></div></td>
                    		<!--{/if}-->
                    	</tr>
                    	
                    	<!--{foreach from=$big.midCategory item=mid}-->
							<tr pid="<!--{$big.bigCategoryID}-->" cid="<!--{$mid.midCategoryID}-->" cname="mid" style="display:none;">
								<td>
									<div <!--{if $mid.smallCategory != ''}--> class="left closeImg" onclick="category.showCategory(<!--{$mid.midCategoryID}-->,2);" id="icon_<!--{$mid.midCategoryID}-->" <!--{else}--> class="left childImg" <!--{/if}--> style="margin-left:30px;"></div>
	                    			<div class="left">
	                    				<form class="form-inline" role="form">
	                    					<div class="form-group">
		                    					<input type="text" name="input_<!--{$mid.midCategoryID}-->" id="input_<!--{$mid.midCategoryID}-->" maxlength="20" value="<!--{$mid.name}-->" onfocus="category.nameFocus(<!--{$mid.midCategoryID}-->);" onblur="category.nameBlur(<!--{$mid.midCategoryID}-->, 2);" class="form-control input-sm">
		                    				</div>
		                    				<div class="form-group" style="margin-left:22px;">
	                    						排序 <input type="text" value="<!--{$mid.sortOrder}-->" id="sort_<!--{$mid.midCategoryID}-->" name="sort_<!--{$mid.midCategoryID}-->" maxlength="10" onfocus="category.sortFocus(<!--{$mid.midCategoryID}-->);" onblur="category.sortBlur(<!--{$mid.midCategoryID}-->, 2);" class="form-control input-sm" style="width:60px;">
	                    					</div>
                    					</form>
	                    			</div>
								</td>
								<td style="text-align:center;" class="use_<!--{$mid.midCategoryID}-->">
									<!--{if $edit_permission}-->
										<!--{if $mid.useFlg == 1}-->
		                    				<a href="javascript:void(0);" onclick="category.changeUse(<!--{$mid.midCategoryID}-->, 0, 2);">启用</a>
		                    			<!--{else}-->
		                    				<a href="javascript:void(0);" onclick="category.changeUse(<!--{$mid.midCategoryID}-->, 1, 2);">禁用</a>
		                    			<!--{/if}-->
	                    			<!--{else}-->
	                    				<!--{if $mid.useFlg == 1}-->
		                    				启用
		                    			<!--{else}-->
		                    				禁用
		                    			<!--{/if}-->
	                    			<!--{/if}-->
								</td>
								<!--{if $edit_permission}-->
									<td><div class="childCategory" onclick=category.addChild('<!--{$big.bigCategoryID}-->_<!--{$mid.midCategoryID}-->_3');></div></td>
		                    		<td><div class="editCategory" onclick="category.edit(<!--{$mid.midCategoryID}-->, 2);"></div></td>
		                    		<td><div class="delCategory" onclick="category.delCategory(<!--{$mid.midCategoryID}-->, 2);"></div></td>
								<!--{/if}-->
							</tr>
							
							<!--{foreach from=$mid.smallCategory item=small}-->
								<tr pid="<!--{$mid.midCategoryID}-->" cid="<!--{$small.smallCategoryID}-->" cname="small" style="display:none;">
									<td>
										<div class="left childImg" style="margin-left:50px;"></div>
		                    			<div class="left">
		                    				<form class="form-inline" role="form">
		                    					<div class="form-group">
			                    					<input type="text" name="input_<!--{$small.smallCategoryID}-->" id="input_<!--{$small.smallCategoryID}-->" maxlength="20" value="<!--{$small.name}-->" onfocus="category.nameFocus(<!--{$small.smallCategoryID}-->);" onblur="category.nameBlur(<!--{$small.smallCategoryID}-->, 3);" class="form-control input-sm">
			                    				</div>
			                    				<div class="form-group" style="margin-left:22px;">
			                    					排序 <input type="text" value="<!--{$small.sortOrder}-->" id="sort_<!--{$small.smallCategoryID}-->" name="sort_<!--{$small.smallCategoryID}-->"  maxlength="10" onfocus="category.sortFocus(<!--{$small.smallCategoryID}-->);" onblur="category.sortBlur(<!--{$small.smallCategoryID}-->, 3);" class="form-control input-sm" style="width:60px;">
			                    				</div>
		                    				</form>
		                    			</div>
									</td>
									<td style="text-align:center;" class="use_<!--{$small.smallCategoryID}-->">
										<!--{if $edit_permission}-->
											<!--{if $small.useFlg == 1}-->
			                    				<a href="javascript:void(0);" onclick="category.changeUse(<!--{$small.smallCategoryID}-->, 0, 3);">启用</a>
			                    			<!--{else}-->
			                    				<a href="javascript:void(0);" onclick="category.changeUse(<!--{$small.smallCategoryID}-->, 1, 3);">禁用</a>
			                    			<!--{/if}-->
			                    		<!--{else}-->
			                    			<!--{if $small.useFlg == 1}-->
			                    				启用
			                    			<!--{else}-->
			                    				禁用
			                    			<!--{/if}-->
			                    		<!--{/if}-->	
									</td>
									<!--{if $edit_permission}-->
										<td>&nbsp;</td>
			                    		<td><div class="editCategory" onclick="category.edit(<!--{$small.smallCategoryID}-->, 3);"></div></td>
			                    		<td><div class="delCategory" onclick="category.delCategory(<!--{$small.smallCategoryID}-->, 3);"></div></td>
									<!--{/if}-->
								</tr>
							<!--{/foreach}-->	
							
						<!--{/foreach}-->
                    	
                    <!--{/foreach}-->
                </tbody>
            </table>
        </div>

    </div>
</div>

<div id="pop" style="display: none;"></div>

<script type="text/javascript">

	var category = {
		
		title: '',
		
		//更新使用状态
		changeUse : function(categoryID, useFlg, level){
			
			this.categoryID = categoryID;
			this.useFlg = useFlg;
			this.level = level;
			
			if (useFlg == 0) {
				E.confirm("您确认要禁用此商品分类吗？", "category.useConfirm");
			} else {
				category.useConfirm();
			}
		},
		
		//确认修改分类使用状态
		useConfirm : function(){
			E.loadding.open('请稍等...');
			E.ajax_post({
				url : "/invokingAjax-backend/goods/category.ajax?operFlg=3",
				data : {'categoryID' : this.categoryID, 'useFlg' : this.useFlg, 'level' : this.level},
				call : 'category.result'
			});
		},
		
		//展示分类
		showCategory : function(id,level){
			var isClose = $('#icon_'+id).is('.closeImg');

			if (isClose) {
				$('#icon_'+id).removeClass('closeImg');
				$('#icon_'+id).addClass('openImg');
				$('tr[pid='+id+']').show();
			} else {
				if (level == 1) {
					$('tr[pid='+id+']').each(function(k,v){
						var cid = $(this).attr('cid');
						
						$('#icon_'+cid).removeClass('openImg');
						$('#icon_'+cid).addClass('closeImg');
						$('tr[pid='+cid+']').hide();
					})
					
				} 
				
				$('#icon_'+id).removeClass('openImg');
				$('#icon_'+id).addClass('closeImg');
				$('tr[pid='+id+']').hide();
			}
		},
		
		//执行ajax成功后调用函数
		result : function(o){
			E.loadding.close();
			if (o.code == 200) {
				if (o.data.type == 1) {	//使用标志
					if (o.data.useFlg == 1) {
						var useStr = '<a href="javascript:void(0);" onclick="category.changeUse('+o.data.categoryID+', 0, '+o.data.level+');">启用</a>';
					} else {
						var useStr = '<a href="javascript:void(0);" onclick="category.changeUse('+o.data.categoryID+', 1, '+o.data.level+');">禁用</a>';
					}
					
					$('.use_'+o.data.categoryID).html(useStr);
				} else if(o.data.type == 2) {	//删除
					$('tr[cid='+o.data.categoryID+']').remove();
				}
				E.alert(o.message, 2);
			} else {
				E.alert(o.message);
			}
		},
		
		//分类添加
		add : function(){
			//E.open("/quanliadmin/app/goods/category.pscript?operFlg=2");
			E.loadding.open('请稍等...');
			this.title = '分类添加'
			this.addType = 1;
			E.ajax_post({
				url : "/invokingAjax-backend/goods/category.ajax?operFlg=6",
				data : {},
				call : 'category.layer'
			});
			
		},
		
		//获取到返回值并显示弹出层
		layer: function(o){
			E.loadding.close();
			if (o.code == 200) {
				$('#pop').html(o.data);
				E.popup.open({
					id:"pop",
					title: this.title,
					css: "width: 700px;",
					btnName: "保存",
					btnCall:"category.save();"
				});
				
				if (o.pitch != null) {
					$('#parentID').val(o.pitch);
					$('#parentID').attr('disabled','true');
				}
				
				$('.square-checkbox').iCheck({
                    checkboxClass: 'icheckbox_square-blue',
                    radioClass: 'iradio_square-blue',
                    increaseArea: '20%'
                });
                
                $.each(o.group, function(k, v) {
                    $('#chk_' + v).iCheck('check');
                });
                
			} else {
				E.alert(o.message);
			}
		},
		
		//保存分类
		save: function(){
			
			this.dt = E.getFormValues('category_form');
        	
        	if (this.dt.categoryName == '') {
        		E.alert('请输入分类名称');
        		return false;
        	}
        	
        	E.loadding.open('请稍等...');
			E.ajax_post({
				url : "/invokingAjax-backend/goods/category.ajax?operFlg=1",
				data : {'params' : this.dt},
				call : 'category.success'
			});
		},
		
		//保存成功
		success: function(o){
			
			E.loadding.close();
        	
        	if (o.code == 200) {
        		if (this.addType == 3) {
        			$('#input_'+o.data.categoryID).val(o.data.categoryName);
        			E.alert(o.message, 2);
        		} else {
	        		E.alert(o.message, 2);
	        		category.load();
        		}
        	} else {
        		E.alert(o.message);
        	}
		},
		
		load : function(){
			self.location = '/quanliadmin/app/goods/category.pscript?operFlg=1';
		},
		
		//编辑
        edit : function(categoryID,level){
        	//E.open("/quanliadmin/app/goods/category.pscript?operFlg=3&categoryID="+categoryID+'&levelID='+level);
        	E.loadding.open('请稍等...');
			this.title = '分类编辑'
			this.addType = 3;
			E.ajax_post({
				url : "/invokingAjax-backend/goods/category.ajax?operFlg=6",
				data : {
					categoryID: categoryID,
					levelID: level
				},
				call : 'category.layer'
			});
        },
        
        //添加子分类
        addChild : function(parentID){
        	//E.open("/quanliadmin/app/goods/category.pscript?operFlg=2&parentID="+parentID);
			E.loadding.open('请稍等...');
			this.title = '子分类添加'
			this.addType = 2;
			E.ajax_post({
				url : "/invokingAjax-backend/goods/category.ajax?operFlg=6",
				data : {
					parentID:parentID
				},
				call : 'category.layer'
			});
        },
        
        //删除分类
        delCategory : function(categoryID, level){
        	this.categoryID = categoryID;
			this.level = level;
			
			E.confirm("您确认要删除此商品分类吗？", "category.delConfirm");
        },
        
        delConfirm : function(){
        	E.loadding.open('请稍等...');
			E.ajax_post({
				url : "/invokingAjax-backend/goods/category.ajax?operFlg=2",
				data : {'categoryID' : this.categoryID, 'level' : this.level},
				call : 'category.result'
			});
        },
        
        //获取排序焦点
        sortFocus : function(categoryID){
        	var focusOrder = E.trim($('#sort_'+categoryID).val());
        	
        	this.sortOrder = focusOrder;
        },
        
        //失去排序焦点
        sortBlur : function(categoryID, level){
        	var blurOrder = E.trim($('#sort_'+categoryID).val());
        	
        	if (blurOrder === '' || !E.isInt(blurOrder)) {
        		E.alert('请输入正确的分类排序');
        		$('#sort_'+categoryID).val(this.sortOrder);
        		return false;
        	}
        	
        	this.categoryID = categoryID;
        	this.level = level;
        	this.order = blurOrder;
        	
			//调用ajax
        	E.ajax_post({
				url : "/invokingAjax-backend/goods/category.ajax?operFlg=4",
				data : {'categoryID' : this.categoryID, 'level' : this.level, 'sortOrder' : this.order},
				call : 'category.focusResult'
			});
        },
        
        //获取分类名称焦点
        nameFocus : function(categoryID){
        	var focusName = E.trim($('#input_'+categoryID).val());
        	this.categoryName = focusName;
        },
        
        //失去分类名称焦点
        nameBlur : function(categoryID, level){
        	var blurName = E.trim($('#input_'+categoryID).val());
        	if (blurName === '') {
        		E.alert('请输入分类名称');
        		$('#input_'+categoryID).val(this.categoryName);
        		return false;
        	}
        	
        	//ajax
        	this.categoryID = categoryID;
        	this.level = level;
        	this.cateName = blurName;
        	
			//调用ajax
        	E.ajax_post({
				url : "/invokingAjax-backend/goods/category.ajax?operFlg=5",
				data : {
					'categoryID' : this.categoryID, 
					'level' : this.level, 
					'categoryName' : this.cateName
				},
				call : 'category.focusResult'
			});
        },
        
        focusResult : function(o){
        	if (o.code == 400) {
        		E.alert(o.message);
        		if (o.data.type == 1) {
        			$('#sort_'+o.data.categoryID).val(this.sortOrder);
        		} else if(o.data.type == 2) {
        			$('#input_'+o.data.categoryID).val(this.categoryName);
        		}
        	}
        }
	}

</script>

</body>

</html>
